<template>
  <div class="new-course">
    <div class="new-course-main">
      <div class="new-course-t">
        <div class="title-hot">
          <h3 class="hot">
            <img src="@/assets/img/newhot.png" alt="" />
          </h3>
          <div></div>
        </div>
      </div>
      <ul class="new-course-b">
        <li class="course-box">
          <img src="@/assets/img/course/4.jpg" alt="" />
          <div class="course-info">
            <h3>计算机视觉--YOLO+Transfomer多场景目标检测实战</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/2.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/6.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
        <li class="course-box">
          <img src="@/assets/img/course/5.jpg" alt="" />
          <div class="course-info">
            <h3>WEB前端零基础到就业全套课程</h3>
            <div class="middle" style="">中级.87人报名</div>
            <div class="price">
              <div class="price-vip">会员专享</div>
              <span class="price-red">￥599.00</span>
              <!-- <del>￥599.00</del> -->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="less">
.new-course {
  //  width: 100%;
  display: flex;
  // margin: 0 auto;
  justify-content: center;
  margin-top: 5px;

  .new-course-main {
    // display: flex;
    width: 1180px;

    .new-course-t {
      .hot {
        img {
          height: 30px;
        }
      }
    }
    .new-course-b {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
      .course-box {
        position: relative;
        width: 270px;
        height: 272px;
        margin-bottom: 24px;
        background: #ffffff;
        box-shadow: 0 6px 10px 0 rgba(95, 101, 105, 0.15);
        border-radius: 8px;
        transition: all 0.2s;
        img {
          width: 270px;
          height: 152px;
          border-radius: 8px 8px 0 0;
          position: relative;
          overflow: hidden;
        }
        .course-info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // color: #545c63;
          padding: 10px 10px;
          height: 104px;

          h3 {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .middle {
            display: block;
            color: #9199a1;
            font-size: 13px;
            margin-top: 8px;
          }
          .price {
            display: flex;
            padding: 8px 0;
            .price-vip {
              text-align: center;
              width: 64px;
              height: 20px;
              background: linear-gradient(90deg, #ff928e 0%, #fe7062 99%);
              color: #fff;
              border-radius: 16px 0px 16px 0px;
            }
            .price-red {
              font-size: 12px;
              margin-left: 8px;
              color: #f01414;
              font-weight: 700 !important;
            }
          }
        }
      }
    }
  }
}
</style>
